{% load i18n %}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- 去掉这个就可以扩缩比例不变
        <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        -->
        <link rel="shortcut icon" type="image/png" href="/static/favicon.ico">
        <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
        <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/static/apple-touch-icon.png">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <!-- ie compatible -->
        <script src="/static/lib/art-template/web-ie-compatible/es5-shim.min.js"></script>
        <script src="/static/lib/art-template/web-ie-compatible/es5-sham.min.js"></script>
        <script src="/static/lib/art-template/web-ie-compatible/json3.min.js"></script>
        <!-- ie compatible end -->
        <script src="/static/lib/art-template/template-web.js"></script>
        <!--- art template web end -->

        <script type="text/javascript" src="{%url 'javascript-catalog' 'btc.js'%}"></script>
        <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
        <title>{% trans 'NuiBiEX' %}</title>
        <link rel="stylesheet" href="/static/home_page/css/index.css">
        <link rel="stylesheet" href="/static/home_page/css/swiper.min.css">
        <script src="/static/home_page/js/jquery-2.1.0.js"></script>
        <script src="/static/home_page/js/swiper.js"></script>

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116730717-1"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'UA-116730717-1');
        </script>

        <script>
            $(document).ready(function() {
                $(".nav-title ul a li").removeClass("active");
                $("#nav_index").addClass("active")
            })
        </script>
    </head>
    <body class="home_page">
        {% include './show/top_bar.html' %}
        <!--  第一个轮播图  -->
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="">
                            <div class="bannerImg" style="background-image:url(/static/home_page/img/banner1.png);">
                                <div class="banner-container">
                                    <div class="bannerFont">
                                        <div class="banner-title">{% trans '欢迎使用' %}</div>
                                        <div class="banner-title">{% trans 'NiuBiEX.com' %}</div>
                                        <div class="banner-title3">{% trans '秒充秒提·安全快捷' %}</div>
                                        <div class="banner-title4">{% trans '世界级电子货币交易平台' %}</div>
                                    </div>
                                </div>
                            </div>
                            <!--<img class="bannerImg" src="/static/home_page/img/banner1.png" alt="">-->
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="">
                            <div class="bannerImg" style="background-image:url(/static/home_page/img/banner2.jpg);">
                                <div class="banner-container">
                                    <div class="bannerFont2">
                                        <div class="banner-title">{% trans '欢迎使用' %}</div>
                                        <div class="banner-title">{% trans 'NiuBiEX.com' %}</div>
                                        <div class="banner-title3">{% trans '秒充秒提·安全快捷' %}</div>
                                        <div class="banner-title4">{% trans '世界级电子货币交易平台' %}</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="">
                            <div class="bannerImg" style="background-image:url(/static/home_page/img/banner1.png);">
                                <div class="banner-container">
                                    <div class="bannerFont">
                                        <div class="banner-title">{% trans '欢迎使用' %}</div>
                                        <div class="banner-title">{% trans 'NiuBiEX.com' %}</div>
                                        <div class="banner-title3">{% trans '秒充秒提·安全快捷' %}</div>
                                        <div class="banner-title4">{% trans '世界级电子货币交易平台' %}</div>
                                    </div>
                                    <!--
                                    <img class="bannerFont" src="/static/home_page/img/zi.png" alt="">
                                    -->
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="">
                            <div class="bannerImg" style="background-image:url(/static/home_page/img/banner2.jpg);">
                                <div class="banner-container">
                                    <div class="bannerFont2">
                                        <div class="banner-title">{% trans '欢迎使用' %}</div>
                                        <div class="banner-title">{% trans 'NiuBiEX.com' %}</div>
                                        <div class="banner-title3">{% trans '秒充秒提·安全快捷' %}</div>
                                        <div class="banner-title4">{% trans '世界级电子货币交易平台' %}</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <!--  内容  -->
    <div class="container news">
        <!--公告-->
        <div class="news-swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="https://niubiexsupport.zendesk.com/hc/zh-cn/articles/360002905774-%E5%85%B3%E4%BA%8ENiuBiEX%E6%95%B0%E5%AD%97%E8%B5%84%E4%BA%A7%E4%BA%A4%E6%98%93%E5%B9%B3%E5%8F%B0%E4%B8%8A%E7%BA%BF%E5%85%AC%E5%91%8A" target="_blank" class="txt-hide">
                            <span class="icon"></span>
                            <!--
                            <span class="txt">{% trans '公告：niubiex在美国，德国，香港三地举行盛大上线发布会' %}</span>
                            -->
                            <span class="txt">{% trans '公告：niubiex在港举行盛大上线发布会' %}</span>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://niubiexsupport.zendesk.com/hc/zh-cn/articles/360002905774-%E5%85%B3%E4%BA%8ENiuBiEX%E6%95%B0%E5%AD%97%E8%B5%84%E4%BA%A7%E4%BA%A4%E6%98%93%E5%B9%B3%E5%8F%B0%E4%B8%8A%E7%BA%BF%E5%85%AC%E5%91%8A" target="_blank" class="txt-hide">
                            <span class="icon"></span>
                            <span class="txt">{% trans '注册送币活动正在进行,注册就送200NBC' %}</span>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://niubiexsupport.zendesk.com/hc/zh-cn/articles/360003124234-%E5%85%B3%E4%BA%8E%E6%9A%82%E6%97%B6%E5%86%BB%E7%BB%93%E6%B3%A8%E5%86%8C%E9%80%81BTC%E7%9A%84%E5%85%AC%E5%91%8A" target="_blank" class="txt-hide">
                            <span class="icon"></span>
                            <span class="txt">{% trans '关于暂时冻结注册送BTC的公告' %}</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 删除  -->
            <div id="del" class="del">
                <img src="/static/home_page/img/x.png" alt="">
            </div>
        </div>

        <div class="tab">
            <div class="tab-top">
                <ul id="tab-ul">
                    <li ><a><span class="xing"></span>{% trans '自选' %} </a></li>
                    <li class="tab-active"><a>ALL</a></li>
                    <li><a>BITCNY</a></li>
                    <li><a>BTC</a></li>
                    <li><a>ETH</a></li>
                    <li><a>USDT</a></li>
                </ul>
                <!-- 搜索  -->
                <div id="search">
                    <input class="tab-search" id="search_key" type="text" placeholder="{% trans '请输入关键词' %}" />
                    <a href="">
                        <img class="search" src="/static/home_page/img/search.png" alt="">
                    </a>
                </div>
            </div>
            <div id="market_index">
            </div>
        </div>
    </div>

    <!-- 空白  -->
    <div class="kong"></div>

    <div class="appTop">
        <div class="container">
            <!--  app  -->
            <div class="app">
                <div class="appTitle">{% trans 'NBEX APP' %}</div>
                <div class="appContent">{% trans '移动端工具提供与Web端完全相同的功能，包括行情、交易、账户管理等，并同时支持Android,iOS两大平台移动端还特别提供行情提醒功能，帮你掌握每一次行情变化。' %}</div>
                <div class="appBottom">
                    <div class="appBottom-left">
                        <img src="/static/home_page/img/iphone.png" alt="">
                    </div>
                    <div class="appBottom-right">
                        <div class="appBottom-right-top">
                            <div class="appBottom-item appBottom-item-one">
                                <a href="">
                                    <img src="/static/home_page/img/app.png" alt="">
                                    <div class="appBottom-item-right">
                                        <span class="appSpan">Availabie on the</span>
                                        <span class="appSpanTwo">Apps Store</span>
                                    </div>
                                </a>
                            </div>
                            <div class="appBottom-mouse">
                                <img src="/static/home_page/img/er.png" alt="">
                            </div>
                        </div>
                        <div class="appBottom-item">
                            <a href="">
                                <img src="/static/home_page/img/google.png" alt="">
                                <div class="appBottom-item-right appBottom-item-right2">
                                    <span class="appSpan">GET ON</span>
                                    <span class="appSpanTwo">Google play</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'show/footer.html' %}

</body>
</html>
<script>
    $(document).ready(function(){
        // 第一个轮播图
        var swiper = new Swiper('.banner .swiper-container', {
            loop:true,
            pagination: {
                el: '.banner .swiper-pagination',
                clickable: true,
            },
            autoplay: {
                delay: 5000,//5秒切换一次
            },
        });

        //  公告
        var newsSwiper = new Swiper('.news-swiper .swiper-container',{
            direction : 'vertical',
            loop:true,
            autoplay: {
                delay: 5000,//5秒切换一次
            },
        });

        // 删除公告
        $('#del img').click(function(){
            $(this).parents('.news-swiper').hide();
        });

    })

</script>
{% include 'show/common_define.html' %}
<script src="/static/site/common_func.js"></script>
{% include './index/market.html' %}
